<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/pagination.js" type="text/javascript" charset="utf-8"></script>
	<title></title>
</head>
<body>
	<div id="view"></div>
	<div id="demo"></div>
	<script type="text/javascript">
		let arr = []
		for (var i = 0; i < 100; i++) {
			arr.push(i)
		}
		console.log(arr);
		$('#demo').pagination({
				pageSize: 5,
				pageRange: null,
				pageNumber: 3,
				// showPageNumbers: false,
				showNavigator: true,
				formatNavigator: '<span style="color: #f00"><%= currentPage %></span> st/rd/th, <%= totalPage %> pages, <%= totalNumber %> entries',
		    dataSource: arr,
				// hideWhenLessThanOnePage:true,
				// className: 'paginationjs-theme-blue',
				formatResult: function(data) {
				        var result = [];
				        for (var i = 0, len = data.length; i < len; i++) {
				            result.push(data[i] + ' - good guys');
				        }
				        return result;
				},
		    callback: function(data, pagination) {
		        // 你自己的模板方法
		        var html = '<p>'+data+'</p><br/>';
		        $("#view").html(html);
		    }
		})
	</script>
</body>
</html>